<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <!-- 侧边栏 -->
    <el-aside width="200px" style="background-color: #fff;overflow: hidden;">
      <el-menu default-active="2" class="el-menu-vertical-demo" style="background-color: #fff;">
        <el-menu-item>
          <i class="el-icon-setting"></i>
          <span slot="title">入驻申请</span>
        </el-menu-item>
        <el-menu-item>
          <i class="el-icon-setting"></i>
          <span slot="title">已入驻商家</span>
        </el-menu-item>
        <el-menu-item>
          <i class="el-icon-setting"></i>
          <span slot="title">商家设置</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 头部内容 -->
    <el-container>
      <el-header style="text-align: right; font-size: 12px" class="my-el-header">
        <template>
          <el-tabs type="border-card">
          <el-tab-pane label="用户管理"></el-tab-pane>
          <el-tab-pane label="配置管理"></el-tab-pane>
          <el-tab-pane label="角色管理"></el-tab-pane>
          <el-tab-pane label="定时任务补偿"></el-tab-pane>
        </el-tabs>
        </template>
        <template>
          <el-input v-model="searchVal" placeholder="请输入商家名称"></el-input>
          <el-button type="primary" size="mini" icon="el-icon-search">查询商家</el-button>
        </template>
      </el-header>

      <!-- 主体 表格里的内容 -->
      <el-main>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="storeName" label="店铺名称"> </el-table-column>
          <el-table-column prop="phone" label="注册手机"> </el-table-column>
          <el-table-column prop="traderType" label="店铺类型">
          </el-table-column>
          <el-table-column prop="traderName" label="店主姓名">
          </el-table-column>
          <el-table-column prop="isCheckd" label="审核状态"> </el-table-column>
          <el-table-column label="提交时间">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="operData" label="操作"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script scoped>
export default {
  name: "Check",
  data() {
    return {
      // 主体表格的数据
      tableData: [
        {
          storeName: "白金刚",
          phone: "18888888888",
          traderType: "钓具",
          traderName: "张三",
          date: "2016-05-03",
          isCheckd: "未通过",
          operData: "xxx",
        },
        {
          storeName: "白金刚",
          phone: "18888888888",
          traderType: "钓具",
          traderName: "张三",
          date: "2016-05-03",
          isCheckd: "未通过",
          operData: "xxx",
        },
      ],
      // 搜索框里的内容
      searchVal: "",
    };
  },
  methods: {
    // 多选框操作
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #fff;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
::v-deep .el-tabs--border-card > .el-tabs__header {
  background-color: #fff;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  border-radius: 8px;
}
::v-deep .el-tabs--border-card {
  border: none;
  box-shadow: none;
}
::v-deep .el-tabs--border-card>.el-tabs__content {
  padding: 0;
}
.my-el-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>